<template>
  <!-- <div class="header" @click.stop = 'theme'>
    <div class="header-left" @click.stop="back"></div>
    <ul class="header-center">
      <li :class="{'active': switchNum === 0}" @click.stop="switchItem(0)">
        <span>我喜欢的</span>
      </li>
      <li :class="{'active': switchNum === 1}" @click.stop="switchItem(1)">
        <span>最近听的</span>
      </li>
    </ul>
    <div class="header-right"></div>
  </div> -->
  <Header class="header">
    <div class="header-left" @click.stop="back" slot="left"></div>
    <ul class="header-center" slot="center">
      <li :class="{'active': switchNum === 0}" @click.stop="switchItem(0)">
        <span>我喜欢的</span>
      </li>
      <li :class="{'active': switchNum === 1}" @click.stop="switchItem(1)">
        <span>最近听的</span>
      </li>
    </ul>
    <div class="header-right" slot="right"></div>
  </Header>
</template>

<script>
import Header from '../Commonheader.vue'
export default {
  name: 'DetailHeader',
  components: {
    Header
  },
  data () {
    return {
      switchNum: 0 // 控制头部中心状态切换
    }
  },
  methods: {
    switchItem (va) {
      this.switchNum = va
      this.$emit('switchItem', va)
    },
    back () {
      window.history.back()
    }
  },
  props: {
  }
}
</script>

<style scoped lang='scss'>
  @import '../../assets/css/variable.scss';
  @import '../../assets/css/mixin.scss';
  .header {
    position: relative;
    z-index: 999;
    .header-left{
      @include bg_img('../../assets/images/back');
    }
    .header-right{
      @include bg_img('../../assets/images/more');
    }
    .header-center {
      color: #fff;
      @include font_size($font_medium_s);
      @include no-wrap();
      display: flex;
      justify-content: center;
      height: 60px;
      border: 1px solid #fff;
      border-radius: 10px;
      margin: 20px 0;
      li{
        font-weight: bold;
        // @include font_color();
        height: 60px;
        line-height: 60px;
        text-align: center;
        padding: 0 20px;
        &.active{
          background: rgba(255, 255, 255, 0.3);
        }
        &:nth-of-type(1){
          border-right: 1px solid #fff;
        }
      }
    }
  }
</style>
